<template>
  <div class="login">
    <div class="title">Management System Login</div>
    <el-form class="login_form" ref="form" :model="loginForm" status-icon :rules="rules" label-width="120px">
      <el-form-item label="Username" prop="username">
        <el-input v-model.trim="loginForm.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="Password" prop="password">
        <el-input type="password" show-password v-model.trim="loginForm.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="Stay logged in" prop="keep">
        <el-checkbox size="middle" v-model="loginForm.keep" :true-label="1" :false-label="0"></el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">Log in</el-button>
        <el-button @click="resetForm('form')">reset</el-button>
        <el-button @click="getPosition">getPosition</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import { LoginAPI } from '@/api'

export default {
  data() {
    return {
      loginForm: {
        username: 'superadmin1',
        password: '123456',
        keep: 0
      },
      rules: {
        username: [
          { required: true, message: 'The username cannot be empty', trigger: 'blur' },
          { min: 6, max: 20, message: 'The username is limited to 6 to 20 digits in length', trigger: 'blur' }
        ],
        password: [
          { required: true, message: 'The password cannot be empty', trigger: 'blur' },
          { min: 6, max: 20, message: 'The password is limited to 6 to 20 digits in length', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    // Login to verify user identity
    async login() {
      let { data } = await LoginAPI(this.loginForm)
      if (data.code == 0) {
        if (data.role == 3) {
          window.localStorage.setItem('username', this.loginForm.username)

          this.$notify.success({ title: data.msg })
          this.$router.push('/')
        } else {
          this.$notify.warning({ title: "Access denied, insufficient user permissions" })
        }
      }
    },
    // Verify after clicking the login button
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.login()
        } else {
          return false;
        }
      });
    },
    // Clicking the Reset Form button
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

  },
  mounted() {

  }
}
</script>

<style scoped>
.login {
  margin: auto;
  margin-top: 80px;
  padding: 30px;
  width: 700px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  background-color: rgb(193, 224, 245);

}

.title {
  font-size: 34px;
  text-align: center;
}

.login_form {
  margin: 20px auto;
  width: 600px;
}
</style>